<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/webjars/jquery/3.3.1/jquery.js"></script>

</head>
<body>
<h1>hello,world.</h1>
<input type="button" id="btnAddGet" value="测试GET">
<input type="button" id="btnAddPost" value="测试POST">
<input type="button" id="btnAddJson" value="测试JSON">
<input type="button" id="btnAddPath" value="测试PATH">
<input type="button" id="btnTestCors" value="测试CORS">
</body>
<script type="text/javascript" th:inline="javascript">
    $(function() {
        // get method
        // 语法：$(selector).get(url,data,success(response,status,xhr),dataType)
        $("#btnAddGet").bind('click', function() {
            $.get(
                "/add",
                { x: 1, y: 2 },
                function(result) {
                    console.log(result);
                }
            );
        });

        // post method
        // 语法：jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
        $("#btnAddPost").bind('click', function() {
            $.post(
                "/add",
                { x: 1, y: 2 },
                function(result){
                    console.log(result);
                }
            );
        });

        // 测试json格式参数
        $("#btnAddJson").bind('click', function() {
            $.ajax({
                contentType: 'application/json',
                type: 'POST',
                url: "/addByJson",
                dataType: "json",
                data: JSON.stringify({ x: 1, y: 2 }),
                success: function (message) {
                    console.log(message);
                },
                error: function (message) {
                    console.log(message);
                }
            });
        });

        // 测试路径上的参数
        $("#btnAddPath").bind('click', function() {
            $.get(
                "/addByPath/1/2",
                function(result) {
                    console.log(result);
                }
            );
        });

        // 测试跨域
        $("#btnTestCors").bind('click', function() {
            $.post(
                "http://localhost:8080/add",
                { x: 1, y: 2 },
                function(result){
                    console.log(result);
                }
            );
        });
    });
</script>
</html>